<template>
  <div class="grouping_box">
    <div class="title">
      <!-- 从上一个流带过来的 属性 有几个 就只能添加几个 -->
      <el-checkbox
        :value="value.attrChecked"
        @input="$emit('input', { ...value, attrChecked: $event })"
        >按属性分组</el-checkbox
      >
    </div>
    <div v-if="value.attrChecked">
      <div
        class="grou_sele modul_bg grou_list"
        v-for="(li, i) in inputList"
        :key="li.id"
      >
        <el-select
          @change="changeGrop"
          class="flow_sele"
          v-model="li.name"
          placeholder=""
          clearable
          filterable
          size="small"
        >
          <!-- 选中的下一个下拉框不能在选择 -->
          <el-option
            :disabled="inputList.map((i2) => i2.name).includes(item.name)"
            v-for="(item, index) in extensionsLR"
            :key="item.id + index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <svg-icon
          v-if="i == 0"
          class="trash icon"
          icon-class="plus"
          @click="handAdd()"
        ></svg-icon>
        <svg-icon
          v-else
          class="trash icon"
          icon-class="trash"
          @click="handDel(i)"
        ></svg-icon>
      </div>
    </div>
    <div class="title">
      <!-- 从上一个流带过来的 属性 有几个 就只能添加几个 -->
      <el-checkbox
        :value="value.checkedFilter"
        @input="$emit('input', { ...value, checkedFilter: $event })"
        >过滤分组</el-checkbox
      >
    </div>
    <div class="grou_sele" v-if="value.checkedFilter">
      <!-- 带下拉的输入框 -->
      <!-- {{ objKey }} -->
      <PopoverInput
        @changeInputValue="changeInputValue"
        :objKey="objKey"
        @changeRadio="changeRadio"
        :value="value.having"
        @input="$emit('input', { ...value, having: $event })"
        keys="filterFun"
      ></PopoverInput>
    </div>
  </div>
</template>

<script>
import PopoverInput from "@/components/PopoverInput";
export default {
  components: {
    PopoverInput,
  },

  props: {
    objKey: {
      type: String,
      default: "funArrAll",
    },
    value: {
      required: true,
    },
    inputList: {},
    extensionsLR: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // extensionsLR() {
    //   let attrArr =
    //     this.$store.state.projection.extensions.funArrAll.find(
    //       (item) => item.name == "属性"
    //     )?.list || [];
    //   console.log(attrArr, "sssssss");
    //   attrArr = attrArr.filter((item) => {
    //     return item.isOption;
    //   });
    //   return attrArr;
    // },
  },
  // watch: {
  //   extensionsLR: function (old, newd) {
  //     console.log(old, "attrArr触发更新吗?");
  //   },
  // },
  data() {
    return {};
  },
  methods: {
    changeInputValue() {
      this.$emit("changeInputValue");
    },
    changeGrop(val) {
      this.$emit("changeGrop", val);
    },
    handDel(i) {
      this.$emit("handDelGroup", i);
    },
    changeRadio(row) {
      this.$emit("input", {
        ...this.value,
        having: row.valueType || row.value,
      });
    },
    handAdd() {
      this.$emit("handAddGroup", this.extensionsLR.length);
    },
  },
};
</script>

<style lang='scss' scoped>
.grouping_box {
  .icon {
    margin-left: 6px;
    color: #999;
  }
  .grou_list {
    padding: 10px;
  }
  .flow_sele {
    width: 100%;
  }
  .title {
    margin: 20px 0;
  }
}
.grou_sele {
  display: flex;
  align-items: center;
}
</style>